<template>
  <el-card shadow="never">
    <div slot="header">
      <span>启信宝信息</span>
    </div>
    <el-tabs
      tab-position="top"
      v-model="activeName"
      @tab-click="handleSwitchTabs"
    >
      <el-tab-pane
        v-for="item in tabList"
        :key="item.type"
        :disabled="tableInfo.loading"
        :label="item.interfaceName"
        :name="item.type + ''"
      >
        <span slot="label">
          {{item.interfaceName }}
          <el-badge is-dot v-if="item.isValue == 1"></el-badge>
        </span>
      </el-tab-pane>
      <SkusTable
        :loading="tableInfo.loading"
        :showSelectCol="false"
        :showPagination="false"
        :columns="tableInfo.columns"
        :dataSource="tableInfo.list"
        :tableHeight="270"
      />
    </el-tabs>
  </el-card>
</template>
<script>
import { mapState } from 'vuex';
import SkusTable from '@/components/supplier/BasicTable';
import EnterpriseInfo from '@/mixins/supplier/enterpriseInfo';
import {
  getListColumnSettings,
  queryEnterpriseInfoListService,
  queryEnterpriseTypeService
} from '@/api/supplier/components';

export default {
  mixins: [ EnterpriseInfo ],
  // 原材料信息组件
  components: {
    SkusTable,
  },
  props: {
    supplierBillInfo: {
      type: Object,
      default: () => {
        return {}
      }
    },
  },
  data () {
    return {
      tableInfo: {
        loading: false,
        list: [],
        columns: [],
      },
      activeName: '',
      enterpriseName: '',
      tabList: [],
    };
  },
  computed: {
    ...mapState('supplier/enterpriseInfo', ['enterpriseInfoTypes']),
  },
  watch: {
    supplierBillInfo: {
      handler (newVal) {
        this.enterpriseName = newVal?.enterpriseName || '';
        this.getTableData();
        this.getTabList();
      },
      deep: true,
      immediate: true
    },
  },

  methods: {
    // 查询类型变更
    handleSwitchTabs (target) {
      const { name } = target;
      const menuId = this.enterpriseInfoTypes.find(item => item.id == name).columnId
      this.getColSettings(menuId)
    },
    // 获取列表配置
    async getColSettings (menuId) {
      this.tableInfo.list = []
      const { status, message, result = [] } = await getListColumnSettings({ menuId })
      if (status === '0') {
        this.setTableColumns(result)
        this.getTableData()
      } else {
        this.$message.error(message)
      }
    },
    // 应用列表配置
    setTableColumns (data) {
      this.tableInfo.columns = data.filter(i => i.isShow).map(i => {
        return {
          title: i.label,
          key: i.prop,
          width: i.width
        }
      })
    },
    // 获取表格数据
    async getTableData () {
      if (!this.enterpriseName || !this.activeName || this.activeName == 0) {
        return;
      }
      const res = await queryEnterpriseInfoListService(
        {
          type: this.activeName,
          companyName: [this.enterpriseName],
          current: 1,
          size: 100
        },
        state => { this.tableInfo.loading = state }
      )
      if (res) {
        const { records } = res.result;
        this.tableInfo.list = records;
      }
    },
    // 获取tabs
    async getTabList () {
      const res = await queryEnterpriseTypeService(
        {
          companyName: this.enterpriseName || '',
        },
        state => { this.tableInfo.loading = state }
      )
      if (res) {
        const { result } = res;
        this.tabList = result;
      }
    },
    // 是否校验
    getValidate () {
      return false;
    }
  },
};
</script>
